<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
           <slot></slot>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 按钮    -->
        <div class="swiper-button-prev btn"></div>
        <div class="swiper-button-next btn"></div>
    </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
export default {
    mounted(){
        new Swiper(".swiper-container",{
             pagination: {
                el: '.swiper-pagination',
            },
            // 循环
            loop : true,
            // 自动切换
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
            // 切换方式
            // effect : 'flip',
            // 按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            effect : 'fade',
            fadeEffect: {
                crossFade: true,
            }
        })
    }
}
</script>
<style lang="scss" scoped>
    .swiper-container{
      background: #000;
      .btn{
          color: #777;
          background: #fff;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          text-align: center;
          border: 1px solid #ccc;
          transition: all .5s;
      }
      .btn:hover{
          background: lavender;
          color: #000;
      }
    }
</style>